<!-- 分页组件 -->
<template>
  <div class="common-pagination">
    <div class="total-num">共 {{ $attrs.total }} 项数据</div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 30, 50]"
        layout="prev, pager, next, jumper"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :="$attrs"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const emit = defineEmits(["sizeChange", "currentChange"]);
const pagination: any = ref({
  currentPage: 1,
  pageSize: 10,
});
const handleSizeChange = (val: number) => {
  emit("sizeChange", val);
};
const handleCurrentChange = (val: number) => {
  emit("currentChange", val);
};
</script>

<style scoped lang="scss">
.pagination .el-input__wrapper {
  width: 56px;
  height: 22px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px 3px 3px 3px;
  font-size: 12px;
  padding: 1px 11px;
  transform: translate3d(0, 0, 0);
  box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.1) inset;
}
.common-pagination {
  width: 100%;
  margin-top: 16px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .total-num {
    color: rgba(6, 11, 28, 0.4);
  }
}
</style>
